 <!--
 * @FileDescription: 图例组件
 * @Author: yuec621@outlook.com
 * @Date: 2024-12-3 10:54:10
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-22 14:22:03
 -->
 <template>
     <div style="max-height: 500px;overflow-y: auto;">
         <div class="lengedbox" v-if="lengedList.length>0&&chartType==1">
             <el-checkbox v-model="state.checkAll" :indeterminate="state.isIndeterminate"
                 @change="handleCheckAllChange">
                 <span class="allBox">
                     <span>图例</span>
                     <span v-show="!state.flagmicai" :class="{active:state.arr.includes(item.type)}" v-for="item in state.valueTypeList"
                         @click.prevent="chartValueType(item)">{{item.name}}</span>
                 </span>
             </el-checkbox>
             <el-checkbox-group class="allBoxSub" v-model="state.checkedCities" @change="handleCheckedCitiesChange">
                 <el-checkbox class="subList" v-for="item in lengedList" :key="item" :label="item" :value="item">
                     <div class="checkList">
                         <p class="subTitle"><span>{{ item.pointId }}{{ item.sensorName }}</span>
                             <span>{{ item.placeName }}</span><em></em></p>
                         <p class="subone" v-if="!item.curlSwitchNodes">
                             <span v-if="!state.flagmicai" :style="{opacity:state.arr.includes(itemsub.type)&&state.checkedCities.map(itemmap=>{
                                return itemmap.pointId
                            }).includes(item.pointId)?1:state.opacityValueType}"
                                 v-for="(itemsub,index) in item.valueList">
                                 <em></em>{{ itemsub.name }}</span>
                                 <!-- 密采数据 -->
                            <span v-else><em></em>密采值</span>
                        </p>
                         <p class="subtwo" v-else><span v-for="(itemsub,index) in item.curlSwitchNodes">
                                 <em :style="{backgroundColor:itemsub.displayValue}">
                                 </em>{{ itemsub.connotation }}</span></p>
                     </div>
                 </el-checkbox>
             </el-checkbox-group>
             <div class="dashedBox">
                 <span>报警</span>
                 <span>解报</span>
                 <span>断电</span>
                 <span>复电</span>
             </div>
         </div>
         <div class="lengedbox" v-if="lengedList.length>0&&(chartType==2||chartType==3)">
             <span class="allBox">
                 <span>图例</span>
             </span>
             <div class="subListsub" v-for="item in lengedList" :key="item" :label="item" :value="item">
                 <p class="subTitle" style="display: flex;align-items: center;"><span
                         style="display: flex;align-items: center;">
                         <em v-if="barLegendShow" style="width: 10px;height: 6px;border-radius: 0;margin-right: 2px;"
                             :style="{backgroundColor:item.maxlineColor}">
                         </em>{{ item.pointId }}{{ item.sensorName }}</span>
                     <span>{{ item.placeName }}</span><em v-if="chartType!=2&&barLegendShow"></em></p>
                 <p v-if="!barLegendShow"><span v-for="(itemsub,index) in item.curlSwitchNodes">
                         <em :style="{backgroundColor:itemsub.displayValue}">
                         </em>{{ itemsub.connotation }}</span></p>
             </div>
         </div>
     </div>
 </template>
 <script setup>
     import {
         computed,
         reactive,
         watchEffect
     } from 'vue';
     import axios from "@/utils/request"
     import {
         searchchannelNoList
     } from '@/api/config'
     import useUserStore from "@/store/modules/user";
     import dayjs from 'dayjs';
     const {
         proxy
     } = getCurrentInstance();
     const calendar = ref(null)
     const userStore = useUserStore();
     const checkedCities = ref([])
     const emits = defineEmits([''])
     const props = defineProps({
         lengedList: {
             type: Array,
             default: () => {
                 return []
             }
         },
         chartType: {
             type: Number,
             default: () => {
                 return 1
             }
         },
         barLegendShow: {
             type: Boolean,
             default: () => {
                 return false
             }
         },
         micaiChart:{
            type: Boolean,
            default: () => {
                return false
            }
        }
     })
     // 重点
     const state = reactive({
         arr: ['min', 'max', 'avg'],
         checkAll: false,
         isIndeterminate: true,
         checkedCities: props.lengedList,
         valueTypeList: [{
             type: 'max',
             valueType: false,
             name: '最大值'
         }, {
             type: 'min',
             valueType: false,
             name: '最小值'
         }, {
             type: 'biao',
             valueType: false,
             name: '标校值'
         }, {
             type: 'avg',
             valueType: false,
             name: '平均值'
         }],
         ValueType: undefined,
         opacityValueType: 1,
         flagmicai:false
     })

     const handleCheckAllChange = (val) => {
         state.checkedCities = val ? props.lengedList : []
         state.isIndeterminate = false
         emits('checkedlegendComClick', state.checkedCities)
     }

     function handleCheckedCitiesChange(val) {
         emits('checkedlegendComClick', state.checkedCities)
     }

     function chartValueType(val) {
         val.valueType = !val.valueType
         state.ValueType = val.type
         state.opacityValueType = 0.4
         if (state.arr.includes(val.type)) {
             state.arr = state.arr.filter(function (ele) {
                 return ele != val.type;
             });
         } else {
             state.arr.push(val.type);
         }
         emits('checkedlegendComClick', {
             valueType: true,
             data: state.valueTypeList
         })
     }

     function isWithinOneHour(startTime, endTime) {
         const diffInMinutes = dayjs(startTime).diff(dayjs(endTime), 'minute');
         return Math.abs(diffInMinutes) <= 60;
     }
     watchEffect(() => {
        let hisChartStore = JSON.parse(localStorage.getItem("hisChart"));
        if(hisChartStore){
            state.flagmicai=isWithinOneHour(hisChartStore.startTime, hisChartStore.endTime)
        }
        state.flagmicai=props.micaiChart
         props.lengedList.forEach(item => {
                item.valueList = [{
                    name: '最大值',
                    icon: 'zan-tianchong',
                    show: true,
                    type: 'max'
                }, {
                    name: '最小值',
                    icon: 'zan-tianchong',
                    show: true,
                    type: 'min'
                }, {
                    name: '标校值',
                    icon: 'zan-tianchong',
                    show: true,
                    type: 'biao'
                }, {
                    name: '平均值',
                    icon: 'zan-tianchong',
                    show: true,
                    type: 'avg'
                }]
            })
     })
 </script>
 <style lang="scss" scoped>
     .checked {
         background-color: red;
     }

     .lengedbox {
         min-width: 300px;
         max-width: 360px;
         background-color: rgba(91, 109, 128, 0.08);
         border-radius: 4px;
         background-color: #fff;
         padding: 10px 16px;
         border-radius: 4px;
         background: linear-gradient(180deg, rgba(240, 246, 255, 1) 0%, rgba(255, 255, 255, 1) 100%), rgba(255, 255, 255, 1);
         border: 1px solid rgba(64, 158, 255, 0.1);
         box-shadow: 0px 2px 12px rgba(33, 49, 66, 0.08);
     }

     .allBox {
         span {
             cursor: pointer;

             &:nth-child(1) {
                 color: rgba(62, 70, 79, 1);
                 font-size: 16px;
                 font-weight: 700;
             }

             &:nth-child(5),
             &:nth-child(4),
             &:nth-child(3),
             &:nth-child(2) {
                 font-size: 14px;
                 border-radius: 2px;
                 border: 1px solid rgba(62, 70, 79, 1);
                 padding: 4px 8px;
                 margin-left: 10px;

                 &.active {
                     background-color: rgba(62, 70, 79, 0.1);
                 }
             }
         }
     }

     .allBoxSub {
         display: flex;
         flex-direction: column;

         .subList {
             height: auto !important;

             .subone {
                 padding: 0;
                 margin: 0;

                 &:nth-child(1) {
                     margin-top: 20px;
                     font-size: 14px;
                     font-weight: 700;

                     span {
                         &:nth-child(2) {
                             margin-left: 10px;
                         }
                     }

                     em {
                         margin-left: 8px;
                         display: inline-block;
                         background-color: rgba(91, 109, 128, 0.4);
                         width: 8px;
                         height: 8px;
                         border-radius: 50%;
                     }
                 }

                 &:nth-child(2) {
                     margin-top: 10px;
                     display: flex;
                     justify-content: start;

                     span {
                         margin-left: -20px;
                         margin-right: 30px;
                         display: flex;
                         align-items: center;

                         em {
                             margin-right: 8px;
                             display: inline-block;
                             width: 16px;
                             height: 2px;
                             border-radius: 2px;
                             position: relative;

                             &::before {
                                 position: absolute;
                                 content: '';
                                 left: 50%;
                                 top: 50%;
                                 transform: translate(-50%, -50%);
                                 width: 8px;
                                 height: 8px;
                                 background-color: #fff;
                                 border-radius: 50%;
                             }
                         }

                         &:nth-child(1) {
                             em {
                                 background-color: rgba(134, 64, 255, 1);

                                 &::before {
                                     border: 2px solid rgba(134, 64, 255, 1);
                                 }
                             }
                         }

                         &:nth-child(2) {
                             em {
                                 background-color: rgba(165, 214, 63, 1);

                                 &::before {
                                     border: 2px solid rgba(165, 214, 63, 1);
                                 }
                             }
                         }

                         &:nth-child(3) {
                             em {
                                 background-color: rgba(64, 158, 255, 1);

                                 &::before {
                                     border: 2px solid rgba(64, 158, 255, 1);
                                 }
                             }
                         }

                         &:nth-child(4) {
                             em {
                                 background-color: rgba(67, 207, 124, 1);

                                 &::before {
                                     border: 2px solid rgba(67, 207, 124, 1);
                                 }
                             }
                         }
                     }
                 }
             }

             .subtwo {
                 &:nth-child(1) {
                     margin-top: 20px;
                     font-size: 14px;
                     font-weight: 700;

                     span {
                         &:nth-child(2) {
                             margin-left: 10px;
                         }
                     }

                     em {
                         margin-left: 8px;
                         display: inline-block;
                         background-color: rgba(91, 109, 128, 0.4);
                         width: 8px;
                         height: 8px;
                         border-radius: 50%;
                     }
                 }

                 &:nth-child(2) {
                     margin-top: 10px;
                     display: flex;
                     justify-content: flex-start;
                     font-size: 14px;

                     span {
                         flex: 1;
                         display: flex;
                         align-items: center;

                         em {
                             margin-right: 8px;
                             display: inline-block;
                             width: 16px;
                             height: 10px;
                             border-radius: 2px;
                         }
                     }
                 }
             }
         }
     }

     .dashedBox {
         display: flex;
         justify-content: space-around;
         margin-top: 20px;

         span {
             font-size: 14px;
             color: rgba(62, 70, 79, 1);

             &:nth-child(1) {
                 position: relative;

                 &::before {
                     position: absolute;
                     left: -20px;
                     top: 50%;
                     transform: translateY(-50%);
                     content: '';
                     width: 13px;
                     height: 2px;
                     border: 1px dashed rgba(255, 153, 0, 1);
                 }
             }

             &:nth-child(2) {
                 position: relative;

                 &::before {
                     position: absolute;
                     left: -20px;
                     top: 50%;
                     transform: translateY(-50%);
                     content: '';
                     width: 13px;
                     height: 2px;
                     border: 1px dashed rgba(103, 194, 58, 1);
                 }
             }

             &:nth-child(3) {
                 position: relative;

                 &::before {
                     position: absolute;
                     left: -20px;
                     top: 50%;
                     transform: translateY(-50%);
                     content: '';
                     width: 13px;
                     height: 2px;
                     border: 1px dashed rgba(245, 108, 108, 1);
                 }
             }

             &:nth-child(4) {
                 position: relative;

                 &::before {
                     position: absolute;
                     left: -20px;
                     top: 50%;
                     transform: translateY(-50%);
                     content: '';
                     width: 13px;
                     height: 2px;
                     border: 1px dashed rgba(64, 158, 255, 1);
                 }
             }
         }

     }

     :deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
         color: rgba(62, 70, 79, 1);
     }

     .subListsub {
         height: auto !important;

         p {
             padding: 0;
             margin: 0;

             &:nth-child(1) {
                 margin-top: 20px;
                 font-size: 14px;
                 font-weight: 700;

                 span {
                     &:nth-child(2) {
                         margin-left: 10px;
                     }
                 }

                 em {
                     margin-left: 8px;
                     display: inline-block;
                     background-color: rgba(91, 109, 128, 0.4);
                     width: 8px;
                     height: 8px;
                     border-radius: 50%;
                 }
             }

             &:nth-child(2) {
                 margin-top: 10px;
                 display: flex;
                 justify-content: flex-start;
                 font-size: 14px;

                 span {
                     flex: 1;
                     display: flex;
                     align-items: center;

                     em {
                         margin-right: 8px;
                         display: inline-block;
                         width: 16px;
                         height: 10px;
                         border-radius: 2px;
                     }
                 }
             }
         }
     }
 </style>